import React, { useState, useEffect } from "react"
import { RouteComponentProps, useParams } from "react-router-dom"
// import axios from "axios"
import { Spin, Row, Col, Divider, Typography, Anchor, Menu } from "antd"
import styles from "./DetailPage.module.css"
import { Header, Footer, ProductIntro, ProductComments } from "../../components"
import { DatePicker, Space, Button } from "antd"
import { AppDispatch } from "../../redux/store"
import { commentMockData } from "./mockup"
import {
  productDetailSlice,
  getProductDetail
} from "../../redux/productDetail/slice"
import { useSelector } from "../../redux/hooks"
import { useDispatch } from "react-redux"
import { MainLayout } from "../../layouts/mainLayout"
import { ShoppingCartOutlined } from "@ant-design/icons"
import { addShoppingCartItem } from "../../redux/shoppingCart/slice"

const { RangePicker } = DatePicker

interface MatchParams {
  touristRouteId: string
}

export const DetailPage: React.FC<RouteComponentProps<MatchParams>> = () => {
  // const { touristRouteId } = useParams<MatchParams>()
  // const [loading, setLoading] = useState<boolean>(true)
  // const [product, setProduct] = useState<any>(null)
  // const [error, setError] = useState<string | null>(null)
  const { touristRouteId } = useParams<MatchParams>()

  const loading = useSelector((state) => state.productDetail.loading)
  const error = useSelector((state) => state.productDetail.error)
  const product = useSelector((state) => state.productDetail.data)

  const dispatch: AppDispatch = useDispatch()

  const jwt = useSelector((s) => s.user.token) as string
  const shoppingCartLoading = useSelector((s) => s.shoppingCart.loading)

  useEffect(() => {
    dispatch(getProductDetail(touristRouteId))
  }, [])

  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: "auto",
          marginRight: "auto",
          width: "100%"
        }}
      />
    )
  }
  if (error) {
    return <div>网站出错：{error}</div>
  }
  return (
    <>
      <MainLayout>
        <div className={styles["page-content"]}>
          {/* 产品简介 与 日期选择 */}
          <div className={styles["product-intro-container"]}>
            <Row>
              <Col span={13}>
                <ProductIntro
                  title={product.title}
                  shortDescription={product.description}
                  price={product.originalPrice}
                  coupons={product.coupons}
                  points={product.points}
                  discount={product.price}
                  rating={product.rating}
                  pictures={product.touristRoutePictures.map((p) => p.url)}
                />
              </Col>
              <Col span={11}>
                <Button
                  style={{ marginTop: 50, marginBottom: 30, display: "block" }}
                  type="primary"
                  danger
                  loading={shoppingCartLoading}
                  onClick={() => {
                    dispatch(
                      addShoppingCartItem({ jwt, touristRouteId: product.id })
                    )
                  }}
                >
                  <ShoppingCartOutlined />
                  放入购物车
                </Button>
                <RangePicker open style={{ marginTop: 20 }} />
              </Col>
            </Row>
          </div>
          {/* 锚点菜单 */}
          <Anchor className={styles["product-detail-anchor"]}>
            <Menu mode="horizontal">
              <Menu.Item key="1">
                <Anchor.Link href="#feature" title="产品特色"></Anchor.Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Anchor.Link href="#fees" title="费用"></Anchor.Link>
              </Menu.Item>
              <Menu.Item key="4">
                <Anchor.Link href="#notes" title="预订须知"></Anchor.Link>
              </Menu.Item>
              <Menu.Item key="5">
                <Anchor.Link href="#comments" title="用户评价"></Anchor.Link>
              </Menu.Item>
            </Menu>
          </Anchor>
          {/* 产品特色 */}
          <div id="feature" className={styles["product-detail-container"]}>
            <Divider orientation={"center"}>
              <Typography.Title level={3}>产品特色</Typography.Title>
            </Divider>
            <div
              dangerouslySetInnerHTML={{ __html: product.features }}
              style={{ margin: 50 }}
            ></div>
          </div>
          {/* 费用 */}
          <div id="fees" className={styles["product-detail-container"]}>
            <Divider orientation={"center"}>
              <Typography.Title level={3}>费用</Typography.Title>
            </Divider>
            <div
              dangerouslySetInnerHTML={{ __html: product.fees }}
              style={{ margin: 50 }}
            ></div>
          </div>
          {/* 预订须知 */}
          <div id="notes" className={styles["product-detail-container"]}>
            <Divider orientation={"center"}>
              <Typography.Title level={3}>预定须知</Typography.Title>
            </Divider>
            <div
              dangerouslySetInnerHTML={{ __html: product.notes }}
              style={{ margin: 50 }}
            ></div>
          </div>
          {/* 商品评价*/}
          <div id="comments" className={styles["product-detail-container"]}>
            <Divider orientation={"center"}>
              <Typography.Title level={3}>用户评价</Typography.Title>
            </Divider>
            <div style={{ margin: 40 }}>
              <ProductComments data={commentMockData} />
            </div>
          </div>
        </div>
      </MainLayout>
    </>
  )
}
